<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>点聚合分析</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.2.0/ol.css" rel="stylesheet">
    <style>
        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建点聚合分析...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup" style='width:350px'>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">点聚合分析</h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <span class="input-group-addon">输入数据<span title="必填字段" style="color: red;"> * </span>　</span>
                <input id="datasetName" type="text" class="form-control"
                       value="newyork_taxi_2013_01_14k_csv_newyork_taxi_2013-01_14k"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">聚合类型<span title="必填字段" style="color: red;"> * </span>　</span>
                <select class="form-control" id="type" name="clientType">
                    <option value="SUMMARYMESH" selected="selected">网格面聚合</option>
                    <option value="SUMMARYREGION">多边形聚合</option>
                </select>
            </div>
            <p>
                <div id="summarymeshS">
                    <div class="input-group">
                        <span class="input-group-addon">网格面类型<span title="必填字段" style="color: red;"> * </span></span>
                        <select class="form-control" id="meshType" name="clientType">
                            <option value="0" selected="selected">四边形网格</option>
                            <option value="1">六边形网格</option>
                        </select>
                    </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分析范围　　</span>
                <input id="query" type="text" class="form-control" value="-74.150, 40.550, -73.750, 40.950"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分辨率<span title="必填字段" style="color: red;"> * </span>　　</span>
                <input id="resolution" type="text" class="form-control" value="100"/>
            </div>
            <p>
        </div>
        <div id="summaryregionS" style="display: none">
            <div class="input-group">
                <span class="input-group-addon">聚合面数据集</span>
                <select class="form-control" id="regionDataset" name="clientType">
                    <option value="ProcessingData_processing_newyorkZone_R" selected="selected">
                        ProcessingData_processing_newyorkZone_R
                    </option>
                    <option value="ProcessingData_processing_singleRegion_R">ProcessingData_processing_singleRegion_R
                    </option>
                </select>
            </div>
            <p>
        </div>
        <div class="input-group">
            <span class="input-group-addon">统计模式　　</span>
            <input id="statisticModes" type="text" class="form-control" value="max"/>
        </div>
        <p>
        <div class="input-group">
            <span class="input-group-addon">权重值字段　</span>
            <input id="fields" type="text" class="form-control" value="col7"/>
        </div>
        <p>
        <div align="right">
            <input type="button" id='btn' class="btn btn-primary" value="创建"/>
        </div>
    </div>
</div>
</div>

<script src="http://cdn.bootcss.com/openlayers/4.2.0/ol.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
<script type="text/javascript">
    var layer, processingsUrl = "http://117.122.248.69:8090/iserver/services/spatialprocessing/rest/v1/jobs",
        token = 'oZdJwpVhYnPNEAt8-ykB-Cy39gEZkdvPZ9knTbCdui1SoBeXWVCwx-j5tOVSScotsUX1qwZF44X9m6wNME1kBg..',
        map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [-73.95, 40.75],
                zoom: 12,
                projection: 'EPSG:4326'
            })
        });
    map.addLayer(new ol.layer.Tile({
        source: new ol.source.Tianditu({
            url: "http://t0.tianditu.com/vec_c/wmts",
            matrixSet: 'c',
            layer: 'vec',
            projection: "EPSG:4326"
        })
    }));
    $("#type").change(function (e) {
        if (e.target.selectedIndex === 0) {
            $("#summarymeshS").show();
            $("#summaryregionS").hide();
            return;
        }
        $("#summarymeshS").hide();
        $("#summaryregionS").show();
    });
    var processingService = new ol.supermap.ProcessingService(processingsUrl),
        info = new ol.control.Control({element: document.getElementById('popup')});

    info.setMap(map);
    map.addControl(info);
    SuperMap.SecurityManager.registerToken('http://117.122.248.69:8090', token);

    function getQuery() {
        if ($('#query').val() === "") {
            return "";
        }
        var query = [];
        $('#query').val().split(',').map(function (el) {
            query.push(parseFloat(el));
        });
        return query;
    }

    $('#btn').on('click', function () {
        $('#btn').prop('disabled', true);
        $("#model").modal({show: true, backdrop: 'static', keyboard: false});
        if (map && layer) {
            map.removeLayer(layer);
        }
        var summaryMeshJobParameter = new SuperMap.SummaryMeshJobParameter({
            datasetName: $('#datasetName').val(),
            resolution: $('#resolution').val(),
            meshType: $('#meshType option:selected').attr('value'),
            fields: $('#fields').val(),
            query: getQuery(),
            statisticModes: $('#statisticModes').val(),
            type: $('#type option:selected').attr('value'),
            regionDataset: $('#regionDataset option:selected').attr('value')
        });
        processingService.addSummaryMeshJob(summaryMeshJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        new ol.supermap.MapService(mapUrl).getMapInfo(function (mapInfo) {
                            layer = new ol.layer.Tile({
                                source: new ol.source.ImageSuperMapRest(ol.source.ImageSuperMapRest.optionsFromMapJSON(mapUrl, mapInfo.result))
                            });
                            map.addLayer(layer);
                            $("#model").modal('hide');
                            $('#btn').prop('disabled', false);
                        });
                    });
                }
            });
        });
    });

    function showAlert(msg, state) {
        var className = "alert-";
        className += state ? "success" : "danger";
        if (!$('#msg_container')[0]) {
            var alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                "style='z-index:800;position: absolute;top: 20px;left: 40%;width:400px;display: none'>" +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                "<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }

</script>
</body>
</html>